<template>
	<sysJk :label="(examType==1?'11':'10')+'.自动喷水灭火系统电气控制柜操作'" showBack :withoutTop="true" leftTime="300">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="taskTit" style="width:100%;text-align: left;font-size: 2.5vh;display: flex;align-items: center;justify-content: space-between;">
					<text>{{questionList[showQuestion-1]}}</text>
					
					<template v-if="showQuestion==4">
						<image v-if="stepFirst" :src="requireUrl+'/static/image/jd/j2-0.png'" mode="heightFix" style="height:100%"></image>
						<image v-else :src="requireUrl+'/static/image/jd/j2-2.png'" mode="heightFix" style="height:100%"></image>
					</template>
				</view>
				<view class="innerContent" style="position:relative;width:100%;height:100%">
					<image :src="bUrl" 
						style="width:100%;height:100%;display: block;"></image>
					<view class="myCard" id="myCard">
						<view class="cardContent"> 

							<view class="handleBtn">
								<!-- <van-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="lastTask">上一题</van-button> -->
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}" v-if="examType==1" @click="showFlag=true">查看解析</u-button>
								<!-- <van-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="nextTask">下一题</van-button> -->
							</view>
							<view class="btnArea">
								<u-button color="#1E90FF	"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="handleFirst" v-if="showQuestion==4&&stepFirst">下一步</u-button>
								<u-button color="#1E90FF	"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="handleData"
									v-if="showQuestion!=4||(showQuestion==4&&!stepFirst)">提交</u-button>
								<u-button color="#1E90FF"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="redo">重做</u-button>
								<u-button color="#1E90FF"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="goBack">返回</u-button>
							</view>
							<view class="writeBox" id="writeBox" :style="{left:writeBoxLeft,top:writeBoxTop}"
								@tap="showDialog" v-if="(picIndex==1&&showQuestion!=4)||(picIndex==1&&!stepFirst&&showQuestion==4)">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="writeBox2" :style="{left:455*widthBl+'px',top:690*heightBl+'px'}"
								@tap="shuibeng" v-if="picIndex==6">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="closeBox2"
								:style="{right:200*widthBl+'px',top:0*heightBl+'px',width:'auto',height:'auto'}" @tap="closeDialog2"
								v-if="picIndex==7||picIndex==8">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="shuifa"
								:style="{left:755*widthBl+'px',top:475*heightBl+'px',width:150*widthBl+'px',height:150*heightBl+'px'}"
								@tap="openShuifa" v-if="picIndex==7">
								<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
							</view>
							<view class="writeBox" id="selectBox"
								:style="{left:1361*widthBl+'px',top:282*heightBl+'px',width:75*widthBl+'px',height:95*heightBl+'px'}"
								@tap="openBtn" v-if="(picIndex==2||picIndex==3)&&showQuestion==2">
								<!-- <image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix"
									style="width:20px"></image> -->
							</view>
							<view class="writeBox" id="autoAndHandChange"
								:style="{left:1360*widthBl+'px',top:280*heightBl+'px',width:75*widthBl+'px',height:95*heightBl+'px'}"
								@tap="changeAutoHand" v-if="picIndex==9||picIndex==10">
								<!-- <image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image> -->
							</view>
							<view class="writeBox" id="closeOneBon"
								:style="{left:1165*widthBl+'px',top:580*heightBl+'px',width:75*widthBl+'px',height:65*heightBl+'px'}"
								@tap="closeOneBon" v-if="(picIndex==9||picIndex==11)&&showQuestion==4">
								<!-- <image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image> -->
							</view>
							<view class="writeBox" id="closeBox" :style="{right:200*widthBl+'px',top:0*heightBl+'px',width:'auto',height:'auto'}"
								@tap="closeDialog" v-if="picIndex==2||picIndex==3||picIndex==9||picIndex==10||picIndex==11||picIndex==103">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="closeBox" :style="{right:100*widthBl+'px',top:100*heightBl+'px'}"
								@tap="closeDialog3" v-if="picIndex==4||picIndex==5">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="changeBtnWay"
								:style="{left:1100*widthBl+'px',top:500*heightBl+'px',width:200*widthBl+'px',height:200*heightBl+'px'}"
								@tap="changeway" v-if="picIndex==4&&btnOpen">
								<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
							</view>
							<view class="writeBox" id="changeBtnWayN"
								:style="{left:495*widthBl+'px',top:315*heightBl+'px',width:200*widthBl+'px',height:200*heightBl+'px'}"
								@tap="changeway" v-if="picIndex==4&&btnOpen">
								<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
							</view>
							<view class="writeBox" id="lastBtn"
								:style="{left:1165*widthBl+'px',top:415*heightBl+'px',width:75*widthBl+'px',height:95*heightBl+'px'}"
								@tap="lastWay" v-if="picIndex==103&&showQuestion==5&&handFlag">
								<!-- <image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image> -->
							</view>
							<view class="zhishideng"
								:style="{left:720*widthBl+'px',top:520*heightBl+'px',position:'absolute'}"
								v-if="picIndex==11&&showQuestion==4&&closeOne">
								<image src="https://www.xfzsb.com/static/image/yellow1.png"
									:style="{width:65*widthBl+'px',height:65*heightBl+'px'}" ></image>
								<image src="https://www.xfzsb.com/static/image/red1.png"
									:style="{width:65*widthBl+'px',height:65*heightBl+'px',marginRight:110*widthBl+'px'}" >
								</image>
								<image src="https://www.xfzsb.com/static/image/red1.png"
									:style="{width:65*widthBl+'px',height:65*heightBl+'px'}" ></image>
							</view>
							<view class="liangBox"
								:style="{left:820*widthBl+'px',top:90*heightBl+'px',position:'absolute'}"
								v-if="picIndex==3">
								<image src="https://www.xfzsb.com/static/image/10-3-2.png"
									:style="{width:65*widthBl+'px',height:65*heightBl+'px',marginRight:25*widthBl+'px'}" ></image>
								<image src="https://www.xfzsb.com/static/image/liang.png" 
									:style="{width:65*widthBl+'px',height:65*heightBl+'px'}" ></image>
								<image src="https://www.xfzsb.com/static/image/liang.png" 
									:style="{width:65*widthBl+'px',height:65*heightBl+'px'}" ></image>
							</view>
							<template v-if="showQuestion==5">
								<view class="light2and2red"
									:style="{left:820*widthBl+'px',top:90*heightBl+'px',position:'absolute',display:'flex'}"
									v-if="picIndex==103&&handFlag">
									<view class="" :style="{width:65*widthBl+'px',height:(65*heightBl)+'px'}">
										<image src="https://www.xfzsb.com/static/image/liang.png"  mode="aspectFit " style="width:100%;height:100%"
											 ></image>
									</view>
									<view class="" :style="{width:65*widthBl+'px',height:(65*heightBl)+'px'}">
									<image src="https://www.xfzsb.com/static/image/10-3-2.png" mode="aspectFit "
										 style="width:100%;height:100%" ></image>
										 </view>
										 <view class="" :style="{width:65*widthBl+'px',height:(65*heightBl)+'px'}">
									<image src="https://www.xfzsb.com/static/image/10-3-2.png" mode="aspectFit "
										 style="width:100%;height:100%" ></image>
										 </view>
								</view>
								<view class="bonStatic"
									:style="{left:655*widthBl+'px',top:520*heightBl+'px',position:'absolute',display:'flex'}"
									v-if="picIndex==103&&!closeBon">
									<view class="" :style="{width:65*widthBl+'px',height:(65*heightBl)+'px',marginRight:240*widthBl+'px'}">
									<image src="https://www.xfzsb.com/static/image/red1.png"
										style="width:100%;height:100%" >
									</image>
									</view>
									<view class="" :style="{width:65*widthBl+'px',height:(65*heightBl)+'px'}">
									<image src="https://www.xfzsb.com/static/image/red1.png"
										style="width:100%;height:100%"></image>
										</view>
								</view>
							</template>
							
							<view class="batBox" @tap="openbatBtn"
								:style="{left:730*widthBl+'px',top:270*heightBl+'px',position:'absolute',display:'flex'}"
								v-if="(picIndex==4&&btnOpen)||picIndex==5">
								<view :style="{width:30*widthBl+'px',marginRight:70*widthBl+'px',background:'#c6c4b7'}">
									<image src="https://www.xfzsb.com/static/image/staB.png"
										style="width:100%;display:block" mode="widthFix"></image>
								</view>
								<view :style="{width:30*widthBl+'px',background:'#c6c4b7'}">
									<image src="https://www.xfzsb.com/static/image/staH.png"
										style="width:100%;display:block" mode="widthFix"></image>
								</view>
							</view>
							<view class="writeBox openbatBtn" @tap="openbatBtn"
								:style="{left:775*widthBl+'px',top:270*heightBl+'px',position:'absolute',width:50*widthBl+'px',height:50*heightBl+'px'}"
								v-if="picIndex==4">

							</view>
							<view class="answerBox" v-if="showQuestion==1">
								<view class="answerTit">
									请判断工作柜所处工作状态
								</view>
								<view class="answerSelect">

									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd"
											v-for="item in items[showQuestion-1]" :key="item.value"
											style="display: flex;margin-bottom: 5px;align-items: center;">
											<view>
												<radio :value="item.value" :checked="result==item.value"  :style="{transform:'scale('+widthBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>

								<!-- <view class="areaSelect" v-if="showQuestion==4">
									<view class="selectTit">
										场景导航 
									</view>
									<view class="selectMain">
										<view class="singleSelect" :class="picIndex==1?'areaBeSelect':''" @tap="changeBurl(1)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											<image :src="url1" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5vw">水泵房</text> 
										</view>
										<view class="singleSelect" :class="picIndex==6?'areaBeSelect':''" @tap="changeBurl(2)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											<image :src="url2" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5vw">末端试水场景</text> 
										</view>
									</view>
									
								</view> -->
							</view>
							<view class="answerBox" v-if="showQuestion==4">
								<view class="answerTit">
									{{stepFirst?'请通过末端试水装置启动水泵':'请模拟水泵故障完成主备泵切换'}}
								</view>

							</view>
							<view class="areaSelect" v-if="showQuestion==4">
								<view class="selectTit">
									场景导航
								</view>
								<view class="selectMain">
									<view class="selectMain">
										<view class="singleSelect" :class="picIndex==1||picIndex==9||picIndex==11||picIndex==103?'areaBeSelect':''" @tap="changeBurl(1)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											<image :src="url1" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5vw">水泵房</text> 
										</view>
										<view class="singleSelect" :class="picIndex==6||picIndex==8||picIndex==7?'areaBeSelect':''" @tap="changeBurl(2)" style="display:flex;font-size:3vh;align-items:center" :style="{height:100*heightBl+'px'}">
											<image :src="url2" mode="heightFix" style="height:100%"></image>
											<text style="margin-left:0.5vw">末端试水场景</text> 
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<u-mask :show="showFlag" @click="onClickHide">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block" style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle">
								【试题解析】 正确答案
							</view>
							<view class="overtitle">
								{{analysList[showQuestion-1]}}
							</view>
							<view class="overtitle" v-if="showQuestion==1">
								正确答案：手动状态
							</view>
						</view>
					</view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>

<script>
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	import sysJk from '@/components/sysJk.vue'
	import {
		fzQuestion
	} from '@/globalApi/requestApi.js'
	export default {
		components: {
			sysJk
		},

		data() {


			return {
				allScore:0,
				examType: 1,
				picIndex: 1,
				requireUrl:baseUrl,
				// widthBl:0,
				// heightBl:0,
				questionList: [
					'【1/5】请判断消防泵组电气控制柜所处的工作状态',
					'【2/5】请通过消防泵组电气控制柜切换到自动控制状态，主泵（1泵）工作状态',
					'【3/5】请通过消防泵组电气控制柜切换到备电工作状态',
					'【4/5】请先通过末端试水装置启动水泵，模拟主泵故障完成主泵（1泵）到备泵的自动切换',
					'【5/5】请通过消防泵组电气控制柜停止喷淋泵'
				],
				showQuestion: 1,
				writeBox: null,
				widthBl: 0,
				heightBl: 0,
				writeBoxLeft: 0,
				writeBoxTop: 0,
				showFlag: false,
				autoFlag: false,
				btnOpen: false,
				shuifaOpen: false,
				stepFirst: true,
				closeBon: false,
				closeOne: false,
				wayChange:false,
				handFlag:false,
				isCorrect:true,
				bUrl: baseUrl + "/static/image/jk/10-1.jpg",
				items: [
					[{
							value: "手动状态",
							checked: false,
							name: "手动状态",
						},
						{
							value: "自动状态",
							checked: false,
							name: "自动状态",
						},

					]
				],
				result: null,
				successBtn: false,
				analysList: [
					'观察指示灯，亮灯代表在该状态',
					'控制柜手自动切换，直接按 手/自选择 按键，注意主备泵情况',
					'主电切备电，需要在手动控制状态下才能切换',
					'模拟主泵故障，其实就是当主泵运行的时候把主泵给弄成故障，看看备泵时候会自动启动。在控制柜上设置一个专门模拟故障的按键（1泵故障切换）。直接点就可以。我们考的是自动切换，不是手动启泵',
					'手动状态才能按停止键'
				],
				url1:baseUrl + "/static/image/jk/10-1.jpg",
				url2:baseUrl + "/static/image/jk/10-6.jpg",

			}
		},
		onLoad(options) {
			this.examType = options.examType
		
		},
		onReady() {
			this.$nextTick(function(){
				this.drawWhiteBox()
			})
		},
		methods: {
			redo(){
				if(this.showQuestion==1){
					this.result = null
					this.picIndex= 1
					this.bUrl= baseUrl + "/static/image/jk/10-1.jpg"
				}else if(this.showQuestion==2){
					this.successBtn = false
					this.picIndex= 1,
					this.bUrl= baseUrl + "/static/image/jk/10-1.jpg"
				}else if(this.showQuestion==3){
					this.wayChange = false
					this.btnOpen = false
					this.picIndex= 1,
					this.bUrl= baseUrl + "/static/image/jk/10-1.jpg"
					
				}else if(this.showQuestion==4){
					
					if(this.stepFirst){
						this.shuifaOpen = false
						
					}else{
						this.closeOne=false
					}
					this.bUrl = baseUrl + "/static/image/jk/10-1.jpg"
					this.picIndex = 1
					
				}else if(this.showQuestion==5){
					this.picIndex= 1
					this.bUrl= baseUrl + "/static/image/jk/10-1.jpg"
					this.handFlag = false
					this.closeBon = false
				}
			},
			goBack() {
				uni.navigateBack()
			},
			lastWay() {
				this.closeBon = true
			},
			closeOneBon() {
				if(!this.closeOne){
					this.closeOne = true
					this.bUrl = baseUrl + "/static/image/jk/4-6.jpg"
					this.picIndex = 11
				}else{
					this.closeOne = false
					this.picIndex = 9
					this.bUrl = baseUrl + "/static/image/jk/10-10.jpg"
				}
				
			},
			changeAutoHand() {
				if (this.showQuestion == 4) {
					this.autoFlag = true
				} else {
					this.bUrl = baseUrl + "/static/image/jk/10-3.jpg"
					this.picIndex = 103
					this.handFlag = true
				}
			},
			closeDialog3(){
				this.bUrl = baseUrl + "/static/image/jk/10-1.jpg"
				this.picIndex = 1
			},
			handleFirst() {
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
				
							if(that.isCorrect&&that.shuifaOpen){
								that.isCorrect = true
								
							}else{
								that.isCorrect = false
							}
							fzQuestion({
								fz_id: that.examId,
								title: '自动喷水灭火系统电气控制柜操作',
								no: '10-4-1',
								question_type: 1,
								user_answer: that.result,
								answer: '',
								is_correct: '',
								score: 5,
								start_time: '',
								end_time: '',
								question_answer: ''
							}).then(res => {
								if (res.code == 200) {
									if (that.showQuestion < 5) {
										// that.showQuestion+=1
										that.bUrl = baseUrl + "/static/image/jk/10-1.jpg"
										that.picIndex = 1
										that.stepFirst = false
									}
								}
							})
						
				});
			},
			openShuifa() {
				this.bUrl = baseUrl + "/static/image/jk/10-7-1.jpg"
				this.shuifaOpen = true
				this.picIndex = 8
			},
			closeDialog2() {
				this.bUrl = baseUrl + "/static/image/jk/10-6.jpg"
				this.picIndex = 6
			},
			shuibeng() {
				if(this.shuifaOpen){
					this.bUrl = baseUrl + "/static/image/jk/10-7-1.jpg"
					this.picIndex = 8
				}else{
					this.bUrl = baseUrl + "/static/image/jk/10-7.jpg"
					this.picIndex = 7
				}
				
			},
			changeBurl(num) {
				if (num == 1) {
					this.bUrl = baseUrl + "/static/image/jk/10-1.jpg"
					this.picIndex = 1
				} else {
					this.bUrl = baseUrl + "/static/image/jk/10-6.jpg"
					this.picIndex = 6
				}
			},
			changeway() {
				this.picIndex = 5
				this.bUrl = baseUrl + "/static/image/jk/10-4-1.jpg"
				this.wayChange=true
			},
			openbatBtn() {
				// this.picIndex==5
				// this.bUrl = baseUrl+"/static/image/jk/10-4-1.jpg"
				this.btnOpen = true
			},
			openBtn() {
				this.successBtn = !this.successBtn
				if (this.successBtn) {
					this.bUrl = baseUrl + "/static/image/jk/10-3.jpg"
					this.picIndex = 3
				} else {
					this.picIndex = 2
					this.bUrl = baseUrl + "/static/image/jk/10-2.jpg"
				}
			},
			onChange(e) {
				this.result = e.detail.value
			},
			handleData() {
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
				
							let handleData ={
								fz_id: that.examId,
								title: '',
								no: '10-' + that.showQuestion,
								question_type: 1,
								user_answer: that.result,
								answer: '',
								is_correct: '',
								score: '',
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							if(that.showQuestion==1){
								if(!that.result){
									uni.showToast({
										title:'请选择答案',
										icon:'none'
									})
									return
								}
								if(that.result=='手动状态'){
									handleData.score = 2
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
								handleData.title = '请判断消防泵组电气控制柜所处的工作状态'
							}else if(that.showQuestion==2){
								if(that.successBtn){
									handleData.score = 1.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
								handleData.title = '请通过消防泵组电气控制柜切换到自动工作状态，主泵（1泵）工作状态'
							}else if(that.showQuestion==3){
								if(that.wayChange){
									handleData.score = 0.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
								handleData.title = '请通过消防泵组电气控制柜切换到备电工作状态'
							}
							else if(that.showQuestion==4){
								if(that.isCorrect&&that.closeOne){
									handleData.score = 0.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
								handleData.title = '请先通过末端试水装置启动水泵，模拟主泵故障完成主泵（1泵）到备泵的自动切换'
							}else if(that.showQuestion==5){
								if(that.closeBon){
									handleData.score = 0.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
								handleData.title = '请通过消防泵组电气控制柜停止喷淋泵'
							}
							fzQuestion(handleData).then(res => {
								that.result = null
								if (res.code == 200) {
									that.allScore+=handleData.score
									if (that.showQuestion < 5) {
										that.showQuestion += 1
										that.bUrl = baseUrl + "/static/image/jk/10-1.jpg"
										that.picIndex = 1
									} else {
										let pages = getCurrentPages()
										let prevPage = pages[pages.length - 2]
										prevPage.$vm.status10 = true
										prevPage.$vm.addScore(that.allScore)
										uni.navigateBack()
									}
								}
							})
						
				});
			},
			closeDialog() {
				this.picIndex = 1
				this.bUrl = baseUrl + "/static/image/jk/10-1.jpg"
			},
			showDialog() {
				// this.showFlag = true

				if (this.showQuestion == 1 || this.showQuestion == 2) {
					if(this.showQuestion==2&&this.successBtn){
						this.bUrl = baseUrl + "/static/image/jk/10-3.jpg"
						this.picIndex = 3
					}else{
						this.picIndex = 2
						this.bUrl = baseUrl + "/static/image/jk/10-2.jpg"
					}
					
				} else if (this.showQuestion == 3) {
					if(!this.wayChange){
						this.picIndex = 4
						this.bUrl = baseUrl + "/static/image/jk/10-4.jpg"
					}else{
						this.picIndex = 5
						this.bUrl = baseUrl + "/static/image/jk/10-4-1.jpg"
					}
					
				}
				if (this.showQuestion == 4  ) {
					if(this.stepFirst){
						this.bUrl = baseUrl + "/static/image/jk/4-6.jpg"
						this.picIndex = 11
					}else{
						if(this.closeOne){
							this.bUrl = baseUrl + "/static/image/jk/4-6.jpg"
							this.picIndex = 11
						}else{
							this.picIndex = 9
							this.bUrl = baseUrl + "/static/image/jk/10-10.jpg"
						}
						
						
					}
					
				}
				if (this.showQuestion == 5) {
					if(!this.handFlag){
						this.picIndex = 10
						this.bUrl = baseUrl + "/static/image/jk/10-10.jpg"
					}else{

						this.bUrl = baseUrl + "/static/image/jk/10-3.jpg"
						this.picIndex = 103
					}
					
				}
			},
			onClickHide() {
				this.showFlag = false
			},
			drawWhiteBox() {
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard')
				warp.boundingClientRect(data => {
					var widthBl = data.width / 1920
					var heightBl = data.height / 921
					 that.widthBl= widthBl 
					 that.heightBl= heightBl 
					// this.writeBox.width = 110*widthBl+'px'
					that.writeBoxLeft = 1350 * widthBl + 'px'
					that.writeBoxTop = 500 * heightBl + 'px'
					// this.writeBox.height = 110*heightBl+'px'
				}).exec()

				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			},
			nextTask() {
				uni.navigateTo({
					url: '../jkK/jkK'
				})
			},
			lastTask() {
				uni.navigateBack()
			},

		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.myCard {
			width: 100%;
			height:100%;
			position: absolute;
			left:0;
			top:0;
			// border-radius: 20rpx;
			// overflow: hidden;
			// z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				// position: relative;
				// z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				.taskTit {
					width: 100%;
					text-align: left;
					background: #fff;
					color: #000
				}

				.handleBtn {
					position: fixed;
					left: 30px;
					bottom: 30px
				}

				.answerBox {
					position: absolute;
					left: 35px;
					top: 0%;
					background: #fff;
					color: #000;
					font-size: 2vh;
					// width: 20%;

					.answerTit {
						background: orange
					}
				}

				.btnArea {
					margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position: fixed;
					right: 30px;
					bottom: 30px // text-align: center;
				}

				.areaSelect {
					position: fixed;
					right: 0;
					bottom: 40%;
					color: #000;

					.selectTit {
						background: orange;
						padding: 5px;
						box-sizing: border-box;
						text-align: center;
					}

					.selectMain {
						background: #fff;

						.singleSelect {
							padding: 5px;
							box-sizing: border-box;
							text-align: center;
						}
					}
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			// border:1px solid green;
			width: 80px;
			height: 80px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
	}
	.areaBeSelect{
		border:1px solid red
	}
</style>